<!DOCTYPE html>
<html>
<head>
  <title>Complex Layout - jQuery EasyUI Demo</title>
  <meta charset="UTF-8">
  <link href="../lib/easyui/themes/bootstrap/easyui.css" rel="stylesheet" type="text/css">
  <link href="../lib/easyui/themes/icon.css" rel="stylesheet" type="text/css">
  <link href="../lib/easyui/themes/color.css" rel="stylesheet" type="text/css">
  <script src="../lib/easyui/jquery.min.js" type="text/javascript"></script>
  <script src="../lib/easyui/jquery.easyui.min.js" type="text/javascript"></script>
  <script src="../lib/easyui/locale/easyui-lang-zh_CN.js" type="text/javascript"></script>
  <style type="text/css">
    body {
      font-family: microsoft yahei;
    }
  </style>
</head>
<body>
<h1>Spring Boot + EasyUI 示例</h1>
<div class="easyui-layout" style="width:100%;height:640px;">
  <div data-options="region:'north'" style="height:50px"></div>
  <div data-options="region:'south',split:true" style="height:50px;"></div>
  <div data-options="region:'west',split:true" style="width:200px;" title="导航栏">
    <div class="easyui-accordion" data-options="fit:true,border:false">
      <div style="padding:10px;" title="数据表">
        <a href="/user">用户表</a>
      </div>
      <div data-options="selected:true" style="padding:10px;" title="Title2">
        content2
      </div>
      <div style="padding:10px" title="Title3">
        content3
      </div>
    </div>
  </div>
  <div data-options="region:'center',title:'展示面板',iconCls:'icon-ok'">
    <div class="easyui-tabs" data-options="fit:true,border:false,plain:true">
      <div data-options="href:'/views/user.html'" style="padding:10px" title="数据表1"></div>
      <div style="padding:5px" title="数据表2">
        <h2>基本的 CRUD 应用</h2>
        <p>数据来源于 json 文件</p>
        <table class="easyui-datagrid"
               data-options="url:'/json/datagrid_data1.json',method:'get',singleSelect:true,fit:true,fitColumns:true">
          <thead>
          <tr>
            <th data-options="field:'itemid'" width="80">Item ID</th>
            <th data-options="field:'productid'" width="100">Product ID</th>
            <th data-options="field:'listprice',align:'right'" width="80">List Price</th>
            <th data-options="field:'unitcost',align:'right'" width="80">Unit Cost</th>
            <th data-options="field:'attr1'" width="150">Attribute</th>
            <th data-options="field:'status',align:'center'" width="50">Status</th>
          </tr>
          </thead>
        </table>
      </div>
    </div>
  </div>
</div>
</body>
</html>
